<template>
  <el-container class="default-layout">
    <el-header height="auto" class="header-nav">
      <div class="topbar-nav flex-space">
        <nav-header />
        <client-only>
          <component :is="componentId"></component>
        </client-only>
      </div>
    </el-header>

    <section class="content-container">
      <nuxt />
    </section>
  </el-container>
</template>

<script>
import axios from 'axios';
import API from '~/interface/User';
import Cookie from 'js-cookie';
import NavHeader from '~/components/public/Header';
import LoginButton from '~/components/public/LoginButton';

export default {
  components: {
    NavHeader,
    LoginButton,
    UserInfo: () => import('~/components/public/UserInformation')
  },

  data() {
    return {
      token: ''
    }
  },

  computed: {
    componentId() {
      // 根据本地是否存在token来切换显示的组件
      return this.token ? 'UserInfo' : 'LoginButton';
    }
  },

  created() {
    if (!process.server) {
      let token = Cookie.get('rabbit_token');
      if (token) this.token = token;
    }
  },
}
</script>

<style lang="scss">
.default-layout {
  height: 100%;

  .content-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 10px 0;
  }

  .header-nav {
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
    background-color: #fff;
    z-index: 99;

    .topbar-nav {
      width: 1200px;
      margin: 0 auto;
    }
  }
}
</style>
